<template>
    <div class="mobile-reg">
        <!-- 1. 公用的导航头部 -->
        <common-nav-header>
            <template #left>
                <a class="back fl" href="javascript:;"></a>
            </template>
            <template #title>
                <h1 class="title fl">用户注册</h1>
            </template>
            <template #right>
                <a class="mobile-reg-status fr" href="javascript:;"></a>
            </template>
        </common-nav-header>
        <!-- 2. 手机注册表单 -->
        <div class="mobile-reg-form">
            <van-form>
                <van-cell-group>
                    <div class="item-box">
                        <van-field v-model="form.mobile" name="mobile" label="手机号" placeholder="请输入手机号" />
                    </div>
                </van-cell-group>
                <van-cell-group>
                    <div class="item-box">
                        <van-field v-model="form.password" type="password" name="password" label="密码"
                            placeholder="请输入密码" @keyup="form.password=form.password.replace(/\s+/g,'')" />
                    </div>
                </van-cell-group>
                <van-cell-group>
                    <div class="item-box">
                        <van-field v-model="form.repass" type="password" name="repass" label="确认密码"
                            placeholder="请输入确认密码" @keyup="form.repass=form.repass.replace(/\s+/g,'')" />
                    </div>
                </van-cell-group>
                <van-button @click="regUserHandle()">注册</van-button>
                <strong class="has-acc">已有账号？<router-link :to="{ path: '/user/accountlogin' }">立即登录</router-link>
                </strong>
            </van-form>
        </div>
    </div>
</template>

<script>
    // 公用的头部
    import CommonNavHeader from '@/components/commonHeader/CommonNavHeader';

    // 对字符串进行签名
    import Crypto from '@/utils/crypto';

    // 一些常用的变量
    import Variable from '@/utils/variable';

    export default {
        watch: {

        },
        created() {

        },
        mounted() {
            // 取消vant自带的淡淡的border-bottom下划线
            this.cancelBorderBottomLine();
        },
        data() {
            return {
                // 绑定的表单数据
                form: {
                    mobile: '',
                    password: '',
                    repass: ''
                }
            };
        },
        methods: {
            // 取消vant自带的下划线 - 处理特殊请求操作下小DOM
            cancelBorderBottomLine() {
                let aVanCellGroup = document.querySelectorAll(".van-cell-group");

                for (let i = 0, len = aVanCellGroup.length; i < len; i++) {
                    // 直接将这个class的van-hairline--top-bottom去掉，保留van-cell-group
                    aVanCellGroup[i].className = 'van-cell-group';
                }
            },
            // 提醒消息
            tipMsg(code, msg) {
                if (code == 0) {
                    this.$toast.success(msg);
                    return true;
                } else {
                    this.$toast.fail(msg);
                    return false;
                }
            },
            // 注册用户
            async regUserHandle() {
                try {
                    let res = await this.$axios.user.regUser(this.form);

                    let {
                        code,
                        msg,
                        responseData: {}
                    } = res.data;

                    // 请求成功
                    if (code == 0) {
                        // 跳转登录页
                        setTimeout(() => {
                            this.$router.push({
                                name: 'user_accountlogin'
                            });
                        }, 3000);
                    }

                    this.tipMsg(code, msg);
                } catch (err) {
                    console.log('err', err);
                }
            }
        },
        computed: {

        },
        components: {
            CommonNavHeader
        }
    };

</script>

<style lang="scss">
    .van-cell {
        padding-left: 0;
        padding-right: 0;
        height: 82px !important;
    }

    .van-field__label,
    .van-field__control {
        span {
            font-weight: normal;
            font-size: 28px;
            color: #333;
        }
    }

    .van-field__control {

        /** 使用webkit内核的浏览器 */
        &::-webkit-input-placeholder {
            color: #999;
        }

        /** Firefox版本4-18 */
        &:-moz-placeholder {
            color: #999;
        }

        /** Firefox版本19+ */
        &::-moz-placeholder {
            color: #999;
        }

        /** IE浏览器 */
        &:-ms-input-placeholder {
            color: #999;
        }
    }

    .send-validator-code {
        font-weight: normal;
        font-size: 28px;
        color: #999;
    }

    .van-cell-group {
        .item-box {
            border-bottom: 1px solid #d4d4d4;
            margin: 0 30px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        &:last-of-type {
            border-bottom: 1px solid #d4d4d4;

            .item-box {
                border-bottom: 0 none;
            }
        }

        &:last-of-type {
            position: relative;

            .line {
                position: absolute;
                right: 211px;
                top: 20px;
                z-index: 1;
                width: 1px;
                height: 45px;
                background-color: #d4d4d4;
                text-indent: -999999em;
            }
        }
    }

    .van-button {
        display: block;
        width: 685px;
        height: 100px;
        box-shadow: 0px 9px 21px 0px rgba(53, 232, 222, .3);
        border-radius: 8px;
        background: -webkit-linear-gradient(to left bottom, #40f0da, #3ff0da);
        background: -o-linear-gradient(to left bottom, #40f0da, #3ff0da);
        background: -ms-linear-gradient(to left bottom, #40f0da, #3ff0da);
        background: -moz-linear-gradient(to left bottom, #40f0da, #3ff0da);
        background: linear-gradient(to left bottom, #40f0da, #3ff0da);
        margin: 0 auto;
        font-weight: bold;
        font-size: 38px;
        line-height: 100px;
        color: #fff;
        text-align: center;
        margin-top: 36px;
    }

    .has-acc {
        display: block;
        font-weight: normal;
        font-size: 28px;
        color: #333;
        text-align: center;
        margin-top: 10px;

        a {
            color: #999;
        }
    }

</style>

<style lang="scss" scoped>
    .mobile-reg {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;

        .common-nav-header {
            .back {
                width: 23px;
                height: 88px;
                background: url(/images/wf_ico.png) no-repeat -652px -307px;
                background-size: 834px 535px;
            }

            .title {
                width: 643px;
                font-weight: bold;
                font-size: 32px;
                line-height: 88px;
                color: #333;
                text-align: center;
            }

            .mobile-reg-status {
                display: none;
            }
        }
    }

    .mobile-reg-form {
        margin-top: 17px;
        border-top: 1px solid #d4d4d4;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

</style>
